<template>
  <div class="teacher-layout">
    <el-container>
      <el-aside width="240px" class="sidebar">
        <div class="logo-container">
          <img src="@/assets/logo.png" alt="智能教学助手" class="logo" />
          <h2>智能教学助手</h2>
        </div>
        
        <el-menu
          :default-active="activeMenu"
          class="menu"
          :router="true"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/teacher/dashboard">
            <el-icon><component :is="'DataLine'" /></el-icon>
            <template #title>仪表盘</template>
          </el-menu-item>

          <el-sub-menu index="design">
            <template #title>
              <el-icon><component :is="'EditPen'" /></el-icon>
              <span>教学设计</span>
            </template>
            <el-menu-item index="/design/new">新建教案</el-menu-item>
            <el-menu-item index="/design/history">历史教案</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="homework">
            <template #title>
              <el-icon><component :is="'Document'" /></el-icon>
              <span>习题管理</span>
            </template>
            <el-menu-item index="/homework/generator">习题生成</el-menu-item>
            <el-menu-item index="/homework/history">历史习题</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="study">
            <template #title>
              <el-icon><component :is="'PieChart'" /></el-icon>
              <span>学情分析</span>
            </template>
            <el-menu-item index="/study/analysis">学情概览</el-menu-item>
            <el-menu-item index="/study/mul-learn-case">批量分析</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="resource">
            <template #title>
              <el-icon><component :is="'VideoPlay'" /></el-icon>
              <span>教学资源</span>
            </template>
            <el-menu-item index="/resources/video">视频资源</el-menu-item>
            <el-menu-item index="/resources/audio">音频资源</el-menu-item>
            <el-menu-item index="/resources/image">图片资源</el-menu-item>
            <el-menu-item index="/resources/multimedia/history">历史记录</el-menu-item>
          </el-sub-menu>
          
          <el-menu-item index="/teacher/profile">
            <el-icon><component :is="'User'" /></el-icon>
            <template #title>个人信息</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header class="header">
          <div class="header-left">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/teacher/dashboard' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-if="$route.meta.title">{{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="header-right">
            <span class="welcome-text">欢迎，{{ teacherName }}</span>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar :size="32" :src="avatarUrl" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <el-main class="main">
          <router-view />
        </el-main>
        
        <el-footer class="footer">
          智能教学助手 &copy; 2023
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const teacherName = ref('');
const avatarUrl = ref('');

// 计算当前活动菜单项
const activeMenu = computed(() => {
  return route.path;
});

// 处理下拉菜单选择
const handleCommand = (command) => {
  if (command === 'profile') {
    router.push('/teacher/profile');
  } else if (command === 'logout') {
    // 清除登录信息
    localStorage.removeItem('token');
    localStorage.removeItem('userRole');
    localStorage.removeItem('teacherName');
    
    // 跳转到登录页
    router.push('/login');
  }
};

onMounted(() => {
  // 获取教师信息
  teacherName.value = localStorage.getItem('teacherName') || '教师';
  avatarUrl.value = localStorage.getItem('teacherAvatar') || '';
});
</script>

<style scoped>
.teacher-layout {
  min-height: 100vh;
}

.sidebar {
  background-color: #001529;
  color: white;
  min-height: 100vh;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #002140;
}

.logo {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.logo-container h2 {
  margin: 0;
  font-size: 18px;
  color: white;
}

.menu {
  border-right: none;
}

.header {
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.welcome-text {
  color: #606266;
}

.main {
  background-color: #f0f2f5;
  padding: 20px;
}

.footer {
  text-align: center;
  color: #909399;
  padding: 24px 0;
  font-size: 14px;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}
</style> 